<template>
    <div class="wrapper" @click='handleClose'>
        <div class="pages">
            <swiper :options="swiperOption">
                <swiper-slide v-for="(item, index) in imgs" :key="index">
                    <img class="swiper-img" :src="item" alt="">
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'Carousel',
        props:{
            'imgs': Array
        },
        data() {
            return {
                swiperOption: {
                    pagination: '.swiper-pagination',
                    paginationType: 'fraction',
                    observeParents: true,
                    observer: true
                },
            }
        },
        methods: {
            handleClose (){
                this.$emit('Close')
                // this.$router.push('/')
            }
        }
    }
</script>
<style lang="stylus" scoped>
    .wrapper >>> .swiper-container
        overflow inherit
    .wrapper
        display flex
        flex-direction column
        justify-content center
        z-index 101
        position fixed
        left 0
        right 0
        top 0
        bottom 0
        background-color #000
        .pages
            overflow hidden
            height 0
            padding-bottom 55%
            width 100%
            background-color #fff
        .swiper-pagination
            color #f00
            bottom -1rem
            .swiper-img
                width 100%
</style>


